<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="component/pageHead.jsp"%>

<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Parlo - eCommerce Bootstrap 4 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    <!-- CSS	============================================ --><!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"><!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/icons.min.css"><!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins.css"><!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css"><!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
<%--    vue--%>
    <script src="assets/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body >
<jsp:include page="component/head.jsp"></jsp:include>
<div class="wrapper">



    <!-- 第一栏轮播图 -->
    <div  class="slider-area section-padding-1">
        <div class="slider-active owl-carousel nav-style-1">
            <div class="single-slider slider-height-1 bg-paleturquoise">
                <div class="container">
                    <div class="row align-items-center">
                        <!-- 第一张图 -->
                        <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                            <div class="slider-content slider-animated-1"><h1 class="animated">精品台灯</h1>
                                <p class="animated">匠心独具，大师设计。精品台灯，彰显生活品质。</p>
                                <div class="slider-btn btn-hover"><a class="animated" href="shop.jsp">前往购买<i
                                        class="sli sli-basket-loaded"></i></a></div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                            <div class="slider-single-img slider-animated-1"><img class="animated"
                                                                                  src="assets/img/slider/slider-hm1-1.png"
                                                                                  alt=""></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="single-slider slider-height-1 bg-paleturquoise">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                            <div class="slider-content slider-animated-1"><h1 class="animated">创意时钟</h1>
                                <p class="animated">黑白配色，素雅典范，精准而优雅。</p>
                                <div class="slider-btn btn-hover"><a class="animated" href="shop.jsp">前往购买 <i
                                        class="sli sli-basket-loaded"></i></a></div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
                            <div class="slider-single-img slider-animated-1"><img class="animated"
                                                                                  src="assets/img/slider/slider-hm1-2.png"
                                                                                  alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="banner-area pt-100 pb-65">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="single-banner mb-30 scroll-zoom"><a href="product-details.jsp"><img class="animated"
                                                                                                    src="assets/img/banner/banner-1.png"
                                                                                                    alt=""></a>
                        <div class="banner-content banner-position-1"><h3>35% off <br>Black Monday</h3>
                            <h2>Lighting For <br>Home.</h2><a href="product-details.jsp">Shop Now</a></div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-banner mb-30 scroll-zoom"><a href="product-details.jsp"><img class="animated"
                                                                                                    src="assets/img/banner/banner-2.png"
                                                                                                    alt=""></a>
                        <div class="banner-content banner-position-2"><h3>15% off</h3>
                            <h2>Table Shiner <br>Moving.</h2><a href="product-details.jsp">Shop Now</a></div>
                    </div>
                    <div class="single-banner mb-30 scroll-zoom"><a href="product-details.jsp"><img class="animated"
                                                                                                    src="assets/img/banner/banner-3.png"
                                                                                                    alt=""></a>
                        <div class="banner-content banner-position-2"><h3>Black Friday</h3>
                            <h2>Wall Lighting <br>Black.</h2><a href="product-details.jsp">Shop Now</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="banner-area pb-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="single-banner mb-30 scroll-zoom"><a href="product-details.jsp"><img
                            src="assets/img/banner/banner-4.png" alt=""></a>
                        <div class="banner-content banner-position-3"><h3>Black Monday</h3>
                            <h2>Wooden Lamp <br>Save 30%</h2><a href="product-details.jsp">Shop Now</a></div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-banner mb-30 scroll-zoom"><a href="product-details.jsp"><img
                            src="assets/img/banner/banner-5.png" alt=""></a>
                        <div class="banner-content banner-position-4"><h3>Black Monday</h3>
                            <h2>Wooden Lamp <br>Save 30%</h2><a href="product-details.jsp">Shop Now</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="feature-area">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-4">
                    <div class="single-feature mb-40">
                        <div class="feature-icon"><img src="assets/img/icon-img/free-shipping.png" alt=""></div>
                        <div class="feature-content"><h4>Free Shipping</h4>
                            <p>Most product are free <br>shipping.</p></div>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-4 col-md-4">
                    <div class="single-feature mb-40 pl-50">
                        <div class="feature-icon"><img src="assets/img/icon-img/support.png" alt=""></div>
                        <div class="feature-content"><h4>Customer Support</h4>
                            <p>24x7 Customer Support</p></div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-4">
                    <div class="single-feature mb-40">
                        <div class="feature-icon"><img src="assets/img/icon-img/security.png" alt=""></div>
                        <div class="feature-content"><h4>Secure Payment</h4>
                            <p>Most Secure Payment <br>for customer.</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blog-area pt-50 pb-65">
        <div class="container">
            <div class="section-title text-center pb-60"><h2>New Blog Posts</h2>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                    classical</p></div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="blog-wrap mb-30 mr-20 text-center scroll-zoom">
                        <div class="blog-img mb-25"><a href="blog-details.html"><img src="assets/img/blog/blog-1.jpg"
                                                                                     alt=""></a></div>
                        <div class="blog-content"><h3><a href="blog-details.html">Distracted by the readable content</a>
                        </h3>
                            <div class="blog-meta blog-mrg-border">
                                <ul>
                                    <li><a href="#">23 December 2019 </a></li>
                                    <li><a href="#">24 View </a></li>
                                    <li><a href="#">4 likes</a></li>
                                </ul>
                            </div>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form.</p></div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="blog-wrap mb-30 ml-20 text-center scroll-zoom">
                        <div class="blog-img mb-25"><a href="blog-details.html"><img src="assets/img/blog/blog-2.jpg"
                                                                                     alt=""></a></div>
                        <div class="blog-content"><h3><a href="blog-details.html">There are many variations of passages
                            of Lorem</a></h3>
                            <div class="blog-meta blog-mrg-border">
                                <ul>
                                    <li><a href="#">23 December 2019 </a></li>
                                    <li><a href="#">24 View </a></li>
                                    <li><a href="#">4 likes</a></li>
                                </ul>
                            </div>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form.</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer-area bg-paleturquoise">
        <div class="container">
            <div class="footer-top text-center pt-45 pb-45">
                <nav>
                    <ul>
                        <li><a href="index.jsp">主页 </a></li>
                        <li><a href="shop.jsp">商城 </a></li>
                        <li><a href="contact-us.jsp">意见与建议 </a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="footer-bottom border-top-1 pt-20">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-5 col-12">
                        <div class="footer-social pb-20"><a href="#">Facebok</a><a href="#">Twitter</a><a href="#">Linkedin</a><a
                                href="#">Instagram</a></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="copyright text-center pb-20"><p>Copyright Â© All Right <a
                                href="http://www.bootstrapmb.com/" title="bootstrapmb">Reserved</a></p></div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-12">
                        <div class="payment-mathod pb-20"><a href="#"><img src="assets/img/icon-img/payment.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer><!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">x</span></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-5 col-sm-12 col-xs-12">
                            <div class="tab-content quickview-big-img">
                                <div id="pro-1" class="tab-pane fade show active"><img
                                        src="assets/img/product/quickview-l1.jpg" alt=""></div>
                                <div id="pro-2" class="tab-pane fade"><img src="assets/img/product/quickview-l2.jpg"
                                                                           alt=""></div>
                                <div id="pro-3" class="tab-pane fade"><img src="assets/img/product/quickview-l3.jpg"
                                                                           alt=""></div>
                                <div id="pro-4" class="tab-pane fade"><img src="assets/img/product/quickview-l2.jpg"
                                                                           alt=""></div>
                            </div><!-- Thumbnail Large Image End --><!-- Thumbnail Image End -->
                            <div class="quickview-wrap mt-15">
                                <div class="quickview-slide-active owl-carousel nav nav-style-2" role="tablist"><a
                                        class="active" data-toggle="tab" href="#pro-1"><img
                                        src="assets/img/product/quickview-s1.jpg" alt=""></a><a data-toggle="tab"
                                                                                                href="#pro-2"><img
                                        src="assets/img/product/quickview-s2.jpg" alt=""></a><a data-toggle="tab"
                                                                                                href="#pro-3"><img
                                        src="assets/img/product/quickview-s3.jpg" alt=""></a><a data-toggle="tab"
                                                                                                href="#pro-4"><img
                                        src="assets/img/product/quickview-s2.jpg" alt=""></a></div>
                            </div>
                        </div>
                        <div class="col-md-7 col-sm-12 col-xs-12">
                            <div class="product-details-content quickview-content"><h2>Products Name Here</h2>
                                <div class="product-details-price"><span>$18.00</span><span class="old">$20.00</span>
                                </div>
                                <div class="pro-details-rating-wrap">
                                    <div class="pro-details-rating"><i class="sli sli-star yellow"></i><i
                                            class="sli sli-star yellow"></i><i class="sli sli-star yellow"></i><i
                                            class="sli sli-star"></i><i class="sli sli-star"></i></div>
                                    <span>3 Reviews</span></div>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisic elit eiusm tempor incidid ut labore
                                    et dolore magna aliqua. Ut enim ad minim venialo quis nostrud exercitation
                                    ullamco</p>
                                <div class="pro-details-list">
                                    <ul>
                                        <li>- 0.5 mm Dail</li>
                                        <li>- Inspired vector icons</li>
                                        <li>- Very modern style</li>
                                    </ul>
                                </div>
                                <div class="pro-details-size-color">
                                    <div class="pro-details-color-wrap"><span>Color</span>
                                        <div class="pro-details-color-content">
                                            <ul>
                                                <li class="blue"></li>
                                                <li class="maroon active"></li>
                                                <li class="gray"></li>
                                                <li class="green"></li>
                                                <li class="yellow"></li>
                                                <li class="white"></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="pro-details-size"><span>Size</span>
                                        <div class="pro-details-size-content">
                                            <ul>
                                                <li><a href="#">s</a></li>
                                                <li><a href="#">m</a></li>
                                                <li><a href="#">l</a></li>
                                                <li><a href="#">xl</a></li>
                                                <li><a href="#">xxl</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="pro-details-quality">
                                    <div class="cart-plus-minus"><input class="cart-plus-minus-box" type="text"
                                                                        name="qtybutton" value="2"></div>
                                    <div class="pro-details-cart"><a href="#">Add To Cart</a></div>
                                    <div class="pro-details-wishlist"><a title="Add To Wishlist" href="#"><i
                                            class="sli sli-heart"></i></a></div>
                                    <div class="pro-details-compare"><a title="Add To Compare" href="#"><i
                                            class="sli sli-refresh"></i></a></div>
                                </div>
                                <div class="pro-details-meta"><span>Categories :</span>
                                    <ul>
                                        <li><a href="#">Minimal,</a></li>
                                        <li><a href="#">Furniture,</a></li>
                                        <li><a href="#">Fashion</a></li>
                                    </ul>
                                </div>
                                <div class="pro-details-meta"><span>Tag :</span>
                                    <ul>
                                        <li><a href="#">Fashion, </a></li>
                                        <li><a href="#">Furniture,</a></li>
                                        <li><a href="#">Electronic</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- Modal end --></div><!-- All JS is here============================================ --><!-- jQuery JS -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script><!-- Popper JS -->
<script src="assets/js/popper.min.js"></script><!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script><!-- Plugins JS -->
<script src="assets/js/plugins.js"></script><!-- Ajax Mail -->
<script src="assets/js/ajax-mail.js"></script><!-- Main JS -->

<script src="assets/js/main.js"></script>
<script src="js/index.js"></script>
<jsp:include page="component/footer.jsp"></jsp:include>
</body>
</html>